<template>
  <div class="body">
    <div class="title" style="padding-left: 10px">
      <el-row>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          style="width: 100%"
        >
          <el-form-item label="关键字:">
            <el-input
              v-model="form.keyword"
              size="small"
              placeholder="根据编号搜索"
            ></el-input> </el-form-item
          >&emsp;&emsp;
          <el-form-item label="状态:">
            <el-select
              v-model="form.state"
              size="small"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option
            ></el-select> </el-form-item
          >&emsp;&emsp;
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="onSearch">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button type="success" class="add" @click="add"
          ><i class="el-icon-edit"></i>新增用户</el-button
        >
      </el-row>
    </div>
    <div class="alert" style="margin-top: 0">
      <i class="el-icon-info"></i> 数据一共 {{ tableData.counts }} 条
    </div>
    <el-table
      :data="tableData.items"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
      fit
    >
      <el-table-column label="序号">
        <template v-slot="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="300">
        <template v-slot="{ row }">
          {{ row.title }}
          <i
            v-if="row.videoURL"
            @click="seeVideo(row.videoURL)"
            class="el-icon-film"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数" />
      <el-table-column prop="username" label="录入人" width="100" />
      <el-table-column label="录入时间" width="180">
        <template v-slot="{ row }">
          {{ disponseTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="状态">
        <template v-slot="{ row }">
          {{ +row.state ? "已启用" : "已禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template v-slot="{ row }">
          <span class="blue" @click="preview(row)">预览</span>
          &nbsp;<span class="blue" @click="publish(row.id, row.state)">{{
            +row.state ? "禁用" : "启用"
          }}</span>
          &nbsp;<span class="ccc" v-if="+row.state">修改</span>
          <span class="blue" v-else @click="edit(row)">修改</span>
          &nbsp;<span class="ccc" v-if="+row.state">删除</span>
          <span class="blue" v-else @click="del(row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <PageTool
      :total="tableData.counts"
      :paginationPage="form.page"
      :paginationPagesize="form.pagesize"
      @pageChange="pageChangeFn"
      @pageSizeChange="pageSizeChangeFn"
    />
    <AeticleAdd ref="addDialog" :id="id" :details="details" @list="list()" />
    <AeticlePreview ref="previewDialog" :id="id" :details="details" />
    <div class="video-preview" v-if="videoVisib">
      <div class="close" @click="closeVideo">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
        <video autoplay :src="url"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, remove, changeState } from '@/api/hmmm/articles.js'
import PageTool from '../components/page-tool.vue'
import AeticleAdd from '../components/articles-add.vue'
import AeticlePreview from '../components/articles-preview.vue'

export default {
  components: { PageTool, AeticleAdd, AeticlePreview },
  data () {
    return {
      status,
      form: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      tableData: {},
      id: null,
      details: {},
      url: null,
      videoVisib: false
    }
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.form)
      this.tableData = data
    },
    clear () {
      this.form.keyword = null
      this.form.state = null
    },
    onSearch () {
      this.list()
    },
    add () {
      this.id = null
      this.details = {}
      this.$refs.addDialog.addVisible = true
    },
    preview (row) {
      this.id = row.id
      this.details = row
      this.$refs.previewDialog.previewVisible = true
    },
    async publish (id, state) {
      state = state ? 0 : 1
      await changeState({ id, state })
      this.$message.success('操作成功')
      this.list()
    },
    edit (row) {
      this.id = row.id
      this.details = row
      this.$refs.addDialog.addVisible = true
    },
    async del (id) {
      await this.$confirm('此操作将永久删除该题目, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
      await remove({ id })
      this.$message.success('操作成功')
      this.list()
    },
    seeVideo (url) {
      this.videoVisib = true
      this.url = url
    },
    closeVideo () {
      this.videoVisib = false
    },
    pageChangeFn (val) {
      this.form.page = val
      this.list()
    },
    pageSizeChangeFn (val) {
      this.form.pagesize = val
      this.list()
    },
    disponseTime (str) {
      return str.split('.')[0].replace(/T/, ' ')
    }
  }
}
</script>
<style scoped lang="less">
.body {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
  .el-icon-film {
    color: #00f;
    font-size: 18px;
  }
  .el-row {
    display: flex;
    & > div {
      width: 140px;
    }
    .el-form-item .el-button {
      width: 56px;
      height: 32px;
      padding: 0;
      text-align: center;
      line-height: 32px;
      font-size: 12px;
    }
  }
  .video-preview {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 9999;
    .close {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%);
      background: rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 5px rgb(0 0 0 / 40%);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
    }
    .box {
      width: 800px;
      height: 600px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
